<template>
	<view class="step3-container">
		<view class="top-tips" @click="linkToAccept"><u-icon name="info-circle" class="icon"></u-icon>当前订单已申请结算，点此前往结算页面查看结算详情</view>
		<view class="box">
			<view class="title">订单信息</view>
			<view class="list">
				<view class="item">
					<text class="label">订单编号：</text>
					<text class="value u-line-1">{{detail.num}}</text>
				</view>
				<view class="item">
					<text class="label">物料类型：</text>
					<text class="value u-line-1">{{detail.skuName}}</text>
				</view>
				<view class="item">
					<text class="label">预算量：</text>
					<text class="value u-line-1">{{detail.totalBudget}}t</text>
				</view>
				<view class="item">
					<text class="label">卸货位置：</text>
					<text class="value u-line-1">{{detail.locationName}}</text>
				</view>
			</view>
		</view>
		<view class="car-box">
			<view class="title">发货批次</view>
			<view class="all">共计：<text>{{carList.length}}</text>车</view>
		</view>
		<mescroll-body ref="mescrollRef" height="100rpx" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="car-list">
				<view class="item" v-for="(item,index) in carList" :key="index">
					<view class="item-body">
						<view class="item-hd">
							<text class="number">{{item.plateNumber}}</text>
						</view>
						<view class="item-bd">
							<view class="bd-l">
								<view>
									<text class="label">发货算量：</text>
									<text class="value">{{item.realWeight}}t</text>
								</view>
							</view>
							<view class="status">
								<u-tag text="已收货" size="mini" type="success" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- <view class="op-box">
			<view class="btn" @click="submit" v-if="$_bauth('acceptance_create')">申请结算</view>
		</view> -->
		
		<!-- 弹出详情 -->
		<u-popup mode="center" border-radius="12" width="650" v-model="carDetailShow">
			<view class="cae-detail-name">{{truckDetail.truckNum}}</view>
			<view class="car-detail-list">
				<text class="label">发货时间：</text>
				<text class="value">{{truckDetail.estimatedDeliveryTime}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">司机：</text>
				<text class="value">{{truckDetail.driverName}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">电话：</text>
				<text class="value" @click="call(truckDetail.driverTel)">{{truckDetail.driverTel}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">收货人：</text>
				<text class="value">李富贵</text>
			</view>
			<view class="car-detail-list">
				<text class="label">电话</text>
				<text class="value" @click="call">14870548205</text>
			</view>
			<view class="car-detail-list">
				<text class="label">进磅时间：</text>
				<text class="value">{{truckDetail.timeBeforeWeighing ? truckDetail.timeBeforeWeighing : '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">出磅时间：</text>
				<text class="value">{{truckDetail.timeAfterWeighing ? truckDetail.timeAfterWeighing : '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">进磅重量：</text>
				<text class="value">{{truckDetail.weightBefore ? truckDetail.weightBefore + 't' : '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">出磅重量：</text>
				<text class="value">{{truckDetail.weightAfter ? truckDetail.weightAfter + 't' : '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">实际收货量：</text>
				<text class="value">{{truckDetail.actual}}m³</text>
			</view>
			<view class="car-detail-list">
				<text class="label">实际偏差：</text>
				<text class="value">{{truckDetail.offset}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">阈值：</text>
				<text class="value">{{truckDetail.unit}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">偏差结果：</text>
				<text class="value">{{truckDetail.actual}}</text>
			</view>
			<view class="car-detail-list" v-if="truckDetail.images">
				<text class="label">图片：</text>
				<text class="value link" @click="previewImage">查看</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		props:{
			orderId:{
				type: String,
				default: null
			},
			detail:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return{
				carDetailShow:false,
				carList:[],
				truckDetail:null,
				upOption:{
					empty:{
						tip:'暂无数据'
					}
				}
			}
		},
		methods:{
			linkToAccept(){
				uni.navigateTo({
					url:`/pages/accept/detail?id=${this.orderId}`
				})
			},
			//下拉刷新
			refresh(){
				this.carList = [];
				this.mescroll.resetUpScroll()
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$nextTick(() => {
					let curPageData = this.detail.records;
					let totalSize = 1
					let curPageLen = curPageData.length;
					this.carList = curPageData;
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			//拨打电话
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			//车辆详情
			showCarDetail(index){
				this.truckDetail = this.carList[index]
				this.carDetailShow = true
			},
			//申请结算
			submit(){
				uni.showModal({
					content:"确定提交验收当前订单？",
					success: (res) => {
						if(res.confirm){
							uni.showLoading({mask:true})
							this.$u.api.applyOrder({id:this.orderId}).then(res => {
								if(res.code == 0){
									uni.hideLoading()
									this.$u.toast('提交成功')
									
									uni.navigateBack({
										delta:1
									})
									this.pageRefresh()
								}else{
									uni.hideLoading()
									this.$u.toast(res.msg)
								}
							}).catch(()=>{uni.hideLoading()})
						}
					}
				})
			},
			pageRefresh(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.refresh();
			},
			previewImage(){
				uni.previewImage({
					urls:this.truckDetail.images.split(','),
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step3-container{
		padding-bottom: 0;
	}
	.box{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		.title{
			font-size: 34rpx;
			font-weight: 800;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			padding-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&.no-border-bottom{
				border-bottom: none;
			}
		}
		.list{
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				.label{
					color: #798188;
				}
				.value{
					color:#333;
					max-width: 400rpx;
					.tel{
						margin-left: 20rpx;
						color: #1378FF;
					}
				}
			}
		}
		.concrete-list{
			.c-item{
				display: flex;
				flex-direction: column;
				padding: 20rpx 0;
				border-bottom:1px solid rgba(188, 198, 218, 0.3);
				.name{
					font-size: 28rpx;
					color: #1378FF;
					margin-bottom: 12rpx;
				}
				.bd{
					display: flex;
					align-items: center;
					view{
						width: 50%;
						font-size: 24rpx;
						color: #666D7F;
						text{
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
			.summary{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;
				.t{
					font-size: 34rpx;
					font-weight: 600;
				}
				.v{
					font-size: 34rpx;
					font-weight: 600;
					color: #1378FF;
				}
			}
		}
		.info-list{
			display: flex;
			.item{
				width: 25%;
				display: flex;
				flex-direction: column;
				border-right: 1px solid rgba(212, 226, 237, 0.6);
				box-sizing: border-box;
				margin-right: 40rpx;
				&:last-child{
					border-right: none;
					margin-right: 0;
				}
				.v{
					font-size: 48rpx;
					font-weight: 500;
					color: #FF6600;
					.tips{
						font-size: 28rpx;
					}
				}
				.t{
					font-size: 24rpx;
					color: #888;
					margin-top: 6rpx;
				}
			}
		}
	}
	.car-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-top: 10rpx;
		.title{
			font-size: 34rpx;
			font-weight: 600;
		}
		.all{
			font-size: 28rpx;
			color: #666D7F;
			text{
				color: #137AFF;
			}
		}
	}
	.car-list{
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding:20rpx;
		}
		.item-body{
			flex: 1;
		}
		.item-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6rpx;
			.number{
				font-size: 28rpx;
				font-weight: 600;
			}
			.startTime{
				font-size: 26rpx;
				color: #666D7F;
			}
		}
		.item-bd{
			display: flex;
			align-items: flex-end;
			.bd-l{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				view{margin-top: 12rpx;}
				.label{
					color: #666D7F;
				}
				.value{
					font-size: 30rpx;
					margin-right: 30rpx;
				}
				
			}
			.bd-r{
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(148deg, #FCA726 0%, #FF6E28 100%);
				border-radius: 100%;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}
	.op-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:14rpx 30rpx 0;
		padding-bottom:calc(14rpx + env(safe-area-inset-bottom)); 
		box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.15);
		.btn{
			height: 82rpx;
			background: #1378FF;
			border-radius: 16rpx;
			line-height: 82rpx;
			font-size: 34rpx;
			color: #fff;
			width: 100%;
			text-align: center;
		}
	}
	
	.cae-detail-name{
		font-size: 34rpx;
		font-weight: 600;
		padding: 30rpx 30rpx;
	}
	.car-detail-list{
		padding: 0 30rpx 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		.label{
			color: #666D7F;
		}
		.value{
			color: #333;
		}
		.link{
			color: #1378FF;
		}
		&:last-child{
			padding-bottom: 30rpx;
		}
	}
	
	.top-tips{
		background: #19be6b;
		padding: 16rpx 24rpx;
		color: #fff;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		.icon{
			margin-right: 6rpx;
		}
	}
</style>